@extends('Admin.base')
@section('css')
    <link rel="stylesheet" href="/Admin/layuiadmin/style/template.css" media="all">
    <link rel="stylesheet" href="/Admin/layuiadmin/css/extend/formSelects-v4.css" media="all">
@endsection
@section('style')
    <style>
        .cmdlist-container{margin-bottom: 20px;}

        .cmdlist-bottom{
            background-color: rgba(0, 0, 0, .6);
            filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#40000000,endColorStr=#40000000);
            color:#fff;
            width: 100%;
            height:0;
            position: absolute;
            bottom: 0px;
            left: 0px;
            vertical-align:middle;
            text-align: center;
            overflow: hidden;
        }
        .cmdlist-container .banner-show:hover .cmdlist-bottom{
            height: 10px;
        }

        .cmdlist-mid{
            display:inline;
            line-height:60px
        }
    </style>
@endsection
@section('content')
    <div class="layui-card">
        <form class="layui-form" id="layui-form" action="{{route('issue.store')}}" method="post">
        <div class="layui-card-header layuiadmin-card-header-auto">
            <fieldset class="layui-elem-field layui-field-title">
                <legend>新建新人优惠券礼包活动</legend>
            </fieldset>
        </div>
            <div class="layui-card-body">
                <div class="layui-form-item ">
                    <div class="layui-inline">
                        <label class="layui-form-label">开 始 日 期</label>
                        <div class="layui-input-inline">
                            <input type="text" name="start_at" lay-verify="required" {{ isset( $data) ? 'disabled' :''}} value="{{ $data->start_at ?? ''}}" class="layui-input" id="test17" placeholder="yyyy-MM-dd">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">截 止 日 期</label>
                        <div class="layui-input-inline">
                            <input type="text" name="end_at" lay-verify="required" {{ isset( $data) ? 'disabled' :''}}  value="{{ $data->end_at ?? ''}}" class="layui-input" id="test18" placeholder="yyyy-MM-dd">
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">启动广告图</label>
                    <div class="layui-col-md4 layui-col-sm4">

                        <div class="cmdlist-container">
                            <div class="banner-show" style="position: relative;">
                                <div style="overflow: hidden;">
                                    <img src="{{$data->photo ?? 'http://ccvs-oss.oss-cn-hangzhou.aliyuncs.com/goods/d7NzLMLVweSouv7VZ0mByYjI2fTShEWrjFQUugnC.png'}}" >
                                </div>
                                <div class="cmdlist-bottom">
                                    <div class="layui-row cmdlist-mid">
                                        <button type="button" style="width: 60%;" class="layui-btn banner-upload-btn">上传图片</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-card-header layuiadmin-card-header-auto">
                    <fieldset class="layui-elem-field layui-field-title">
                        <legend>新人优惠券配置</legend>
                    </fieldset>
                </div>
                <div class="layui-card-body" style="width:700px;">
                    <table id="LAY-table" lay-filter="LAY-table"></table>

                    <script type="text/html" id="toolbarDemo">
                        <div class="layui-btn-container">
                            <a class="layui-btn" href="javascript:void(0);" id="activity">新建优惠券</a>
                        </div>

                    </script>
                </div>

                <div class="layui-form-item">
                    <div class="layui-input-block">
                        {{method_field('POST')}}
                        {{csrf_field()}}
                        <a  class="layui-btn layui-btn-danger" href="{{route('issue.index')}}" >取消</a>
                        <button type="button" class="layui-btn" id="save-btn" style="display:none;">创建活动</button>
                        <button type="submit" class="layui-btn" lay-submit lay-filter="layui-form-submit" id="submit-btn">创建活动</button>
                        {{--<button type="button" class="layui-btn" id="save-btn" >创建活动</button>--}}
                    </div>
                </div>
        </div>
        </form>
    </div>
@endsection
@section('script')
    <script src="/js/ajax.js"></script>
    <script>
        layui.use(['laydate', 'form', 'upload', 'table' ], function () {
            var form = layui.form,
                laydate = layui.laydate,
                table = layui.table,
                upload = layui.upload;
            //开启公历节日
            laydate.render({
                elem: '#test17'
                , calendar: true
            });
            laydate.render({
                elem: '#test18'
                , calendar: true
            });
            table.render({
                elem: '#LAY-table'
                ,toolbar: '#toolbarDemo'
                ,defaultToolbar: []
                ,url: "{{url('/admin/issue/activity_interim_table')}}"
                ,method: "post"
                ,page: false //开启分页
                ,limit:10
                ,cols: [[
                    {field:'activity_name', title:'优惠券名称' }
                    ,{field:'type', title:'规则',templet:function (d) {
                        if(d.rule_type == 2){
                            return  "满" + d.full + "减" + d.less;
                        }else {
                            return   "立减" + d.less;
                        }
                    }}
                    ,{field: 'activity_tim', title: '有效期',templet:function(d){
                        return d.activity_time == 0 ? '永久生效': '领券后'+ d.activity_time + '天'  ;
                    }}
                    ,{field: 'amount', title: '发放数量（张）' ,templet:function(d){
                        return d.amount   ? d.amount  : 0;
                    }}
                    ,{field: 'amount_use', title: '已使用（张）' ,templet:function(d){
                        return d.amount_use   ? d.amount_use  : 0;
                    }}
                ]]

            });
            $(document).on('click','#activity',function(){
                layer.open({
                    type: 2
                    ,title : "新间优惠券"
                    ,content:['_form','no']
                    ,area: ['700px', '600px']
                    ,resize:true
                    ,success: function(layero, index){
                }
                });
            });
            upload.render({
                elem: '.banner-upload-btn'
                ,url: '{{route('issue.store')}}'
                ,accept: 'images'
                ,acceptMime: 'image/*'
                ,exts: 'png'
                ,field: 'photo'
                ,size: 0
                ,multiple: false
                ,auto: false
                ,bindAction: '#save-btn'
                ,data: {
                    _method: function(){
                        return $('input[name="_method"]').val();
                    }
                    ,start_at: function(){
                        return $('input[name="start_at"]').val();
                    },
                    end_at: function(){
                        return $('input[name="end_at"]').val();
                    },
                    _token: function(){
                        return $('input[name="_token"]').val();
                    }
                }
                ,choose: function(obj){
//                    var files = obj.pushFile();
                    var item = this.item;
                    //预读本地文件，如果是多文件，则会遍历。(不支持ie8/9)
                    obj.preview(function(index, file, result){
                        item.parents('.banner-show').find('img').attr('src',result);
                    });
                    $('#submit-btn').remove();
                    $('#save-btn').show();


                }
                ,before: function(obj){ //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
                    $('input[name="end_at"]').val();
                    layer.load(2); //上传loading
                }
                ,done: function(res, index, upload){
                    layer.closeAll('loading'); //关闭loading
                    layer.msg(res.message,function () {
                        if ( res.code == 200){
                            location.href=res.redirect;
                        }
                    });
                    return false;
                }
                ,error: function(index, upload){
                    layer.closeAll('loading'); //关闭loading
                    layer.msg('保存失败' );
                }
            });
        });

    </script>
    <script>
        $('.banner-show').on( 'mouseenter', function() {
            $(this).find('.cmdlist-bottom').stop().animate({height: 60});
        });

        $('.banner-show').on( 'mouseleave', function() {
            $(this).find('.cmdlist-bottom').stop().animate({height: 0});
        });
    </script>

@endsection
